<template>
    <div class="big-box">
      <stat></stat>
      <!-- 头部 -->
      <div class="header" @click="goFn()">
        <div class="h-left">
          <div class="time">
            <img src="@/assets/bigScreen/time.png" alt="" />
            <div class="date">{{ dates }}</div>
          </div>
          <div class="tq">
            <img src="@/assets/bigScreen1/tianqi.png" alt="" />
            <div class="tq-text">晴 {{ 20 }} ℃</div>
          </div>
        </div>
        <div class="h-center">
          <div class="title">村民经营性自建房消防安全排查治理</div>
        </div>
        <div class="h-right">
          <!-- <div class="time-title">时间区间：</div> -->
          <div class="time-content">
            <el-date-picker
              v-model="timeRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="timeChange"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
              size="default"
            />
          </div>
        </div>
      </div>
      <!-- 主题内容 -->
      <div class="content">
        <div class="box-con">
          <!-- 左边 -->
          <div class="main-l">
            <div class="m-l-top">
              <div class="title-item animate__animated animate__fadeInUp">
                <div>人员疏散通道情况</div>
                <!-- <div class="more" @click="openLine1">
                  <div class="btns">
                    <div class="m-btns">
                      <img src="@/assets/bigScreen1/more.png" />
                    </div>
                  </div>
                </div> -->
              </div>
              <div class="content1 animate__animated animate__fadeInUp">
                <list1 :key="currentIndex" :listData="rysstdData"></list1>
              </div>
            </div>
            <div class="m-l-center">
              <div class="title-item animate__animated animate__fadeInUp">
                <div>电动自行车违规情况</div>
                <!-- <div class="more" @click="openLine1">
                  <div class="btns">
                    <div class="m-btns">
                      <img src="@/assets/bigScreen1/more.png" />
                    </div>
                  </div>
                </div> -->
              </div>
              <div class="content1 animate__animated animate__fadeInUp">
                <left1
                  :key="1"
                  :xData="ddzxcXData"
                  :data1="ddzxcFXData"
                  :data2="ddzxcQLData"
                  :legendText="['发现违规数', '清理违规数']"
                ></left1>
              </div>
            </div>
            <div class="m-l-bottom">
              <div class="title-item animate__animated animate__fadeInUp">
                <div>护栏拆除情况</div>
                <!-- <div class="more" @click="openBar1">
                  <div class="btns">
                    <div class="m-btns">
                      <img src="@/assets/bigScreen1/more.png" />
                    </div>
                  </div>
                </div> -->
              </div>
              <div class="content1 animate__animated animate__fadeInUp">
                <list2 :key="currentIndex" :listData="hlccData"></list2>
              </div>
            </div>
            <div class="m-l-bottom">
              <div class="title-item animate__animated animate__fadeInUp">
                <div>宣传警示开展情况</div>
                <!-- <div class="more" @click="openBar1">
                  <div class="btns">
                    <div class="m-btns">
                      <img src="@/assets/bigScreen1/more.png" />
                    </div>
                  </div>
                </div> -->
              </div>
              <div class="content1 animate__animated animate__fadeInUp">
                <list3 :key="currentIndex" :listData="xcjskzData"></list3>
              </div>
            </div>
            <div class="m-l-bottom1">
              <div class="title-item animate__animated animate__fadeInUp">
                <div>清理液化石油气情况</div>
                <!-- <div class="more" @click="openBar1">
                  <div class="btns">
                    <div class="m-btns">
                      <img src="@/assets/bigScreen1/more.png" />
                    </div>
                  </div>
                </div> -->
              </div>
              <div class="content1 animate__animated animate__fadeInUp">
                <!-- <bar1
                  v-if="true"
                  :limit="[0, 4]"
                  :xData="xfyhclxData"
                  :data1="yhslData"
                  :data2="zgslData"
                  :legendText="xfyhclText"
                ></bar1> -->
                <div class="ages-box">
                  <div class="ages-box-item">
                    <div style="margin: 0; color: #1b7ef2; font-size: 1.5rem">
                      <span>{{ qlyhsyqData[0].name }}</span>
                      <span>:{{ qlyhsyqData[0].value }}</span>
                      <span>{{ qlyhsyqData[0].unit }}个</span>
                    </div>
                  </div>
                  <div class="ages-box-item">
                    <div style="margin: 0; color: #00e0fc; font-size: 1.5rem">
                      <span>{{ qlyhsyqData[1].name }}</span>
                      <span>:{{ qlyhsyqData[1].value }}</span>
                      <span>{{ qlyhsyqData[1].unit }}个</span>
                    </div>
                  </div>
                  <div class="ages-box-item">
                    <!-- <span>{{ qlyhsyqData[2].name }}</span>
                    <span>:{{ qlyhsyqData[2].value }}</span>
                    <span>{{ qlyhsyqData[2].unit }}</span> -->
                    <div style="margin: 0; color: #51c81b; font-size: 1.5rem">
                      <span>{{ qlyhsyqData[2].name }}</span>
                      <span>:{{ qlyhsyqData[2].value }}</span>
                      <span>{{ qlyhsyqData[2].unit }}%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 中间 -->
          <div class="main-c">
            <div class="m-c-top">
              <div class="top-list animate__animated animate__fadeInUp">
                <div
                  class="l-item"
                  v-for="(item, index) in topList"
                  @click="tabClick(item)"
                >
                  <div class="icon">
                    <img :src="item.url" />
                  </div>
                  <div class="zcl">
                    <div class="bottom">{{ item.percent }}%</div>
                    <div class="top">{{ item.name }}</div>
                  </div>
                  <div class="jzcs">
                    <div class="item">
                      <span class="title">{{ item.name1 }}</span> ：
                      <span class="value"> {{ item.value1 }} </span>
                      <span class="unit">{{ item.unit }}</span>
                    </div>
                    <div class="item">
                      <span class="title">{{ item.name2 }}</span> ：
                      <span class="value"> {{ item.value2 }} </span>
                      <span class="unit">{{ item.unit }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="m-c-center animate__animated animate__fadeInUp">
              <!-- :mapData="mapData" -->
              <nmgMap
                :key="mapKey"
                :maplist="[]"
                :mapData="mapData"
                :areaTypeMap="areaTypeMap"
                @getMapList="getMapList"
                style="width: 100%; height: 100%"
              />
            </div>
            <div class="m-c-bottom">
              <div class="wrap">
                <div class="b-left">
                  <div class="title-item animate__animated animate__fadeInUp">
                    <div>基础信息</div>
                    <!-- <div class="more" @click="openRight1">
                      <div class="more" @click="openRight1">
                        <div class="btns">
                          <div class="m-btns">
                            <img src="@/assets/bigScreen1/more.png" />
                          </div>
                        </div>
                      </div>
                    </div> -->
                  </div>
                  <div class="content1 animate__animated animate__fadeInUp">
                    <div class="sta-box">
                      <div
                        class="sta-li"
                        v-for="(item, index) in baseList"
                        :key="index"
                      >
                        <img :src="item.url" alt="" />
                        <div class="sta-li-r">
                          <div class="text">{{ item.name }}</div>
                          <div class="count">
                            <CountTo
                              :startVal="0"
                              :endVal="+item.value"
                              :separator="false"
                              :duration="2000"
                            /><span>{{ item.unit }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="b-right animate__animated animate__fadeInUp">
                  <div class="title-item animate__animated animate__fadeInUp">
                    <div>基础建设情况</div>
                    <!-- <div class="more" @click="openRight1">
                      <div class="more" @click="openLine1">
                        <div class="btns">
                          <div class="m-btns">
                            <img src="@/assets/bigScreen1/more.png" />
                          </div>
                        </div>
                      </div>
                    </div> -->
                  </div>
                  <div class="content1 animate__animated animate__fadeInUp">
                    <div class="sta-box">
                      <div
                        class="sta-li"
                        v-for="(item, index) in baseJsList"
                        :key="index"
                      >
                        <img src="@/assets/bigScreen/costa-bg.png" alt="" />
                        <div class="sta-li-r">
                          <div class="text">{{ item.name }}</div>
                          <div class="count">
                            <CountTo
                              :startVal="0"
                              :endVal="+item.value"
                              :separator="false"
                              :duration="2000"
                            /><span>{{ item.unit }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 右边 -->
          <div class="main-r">
            <div class="m-r-top">
              <div class="title-item animate__animated animate__fadeInUp">
                <div>自查覆盖率</div>
                <div class="btns">
                  <div class="more">
                    <div
                      @click="openZcRight1('zc')"
                      :class="{ isActive: activeZcfxlItem === 'zc' }"
                      class="zc"
                    >
                      自查
                    </div>
                    <div
                      @click="openJcRight1('jc')"
                      :class="{ isActive: activeZcfxlItem === 'jc' }"
                      class="jc"
                    >
                      检查
                    </div>
                  </div>
                  <div @click="openRight1" class="m-btns">
                    <img src="@/assets/bigScreen1/more.png" />
                  </div>
                </div>
              </div>
              <div class="content1 animate__animated animate__fadeInUp">
                <right1
                  :key="1"
                  :xData="zcl_xData"
                  :data1="zcl_sData"
                  :legendText="['自查率']"
                  @quCurrentClick="quCurrentZclClick"
                ></right1>
              </div>
            </div>
            <div class="m-r-center">
              <div class="title-item animate__animated animate__fadeInUp">
                <div>隐患发现率</div>
                <div class="btns">
                  <div class="more">
                    <div
                      @click="openZcRight2('zc')"
                      :class="{ isActive: activeYhfxlItem === 'zc' }"
                      class="zc"
                    >
                      自查
                    </div>
                    <div
                      @click="openJcRight2('jc')"
                      :class="{ isActive: activeYhfxlItem === 'jc' }"
                      class="jc"
                    >
                      检查
                    </div>
                  </div>
                  <div @click="openRight2" class="m-btns">
                    <img src="@/assets/bigScreen1/more.png" />
                  </div>
                </div>
              </div>
              <div class="content1 animate__animated animate__fadeInUp">
                <!-- <right2 :key="currentIndex" :tableData="tableData"></right2> -->
                <right1
                  :key="1"
                  :xData="fxl_xData"
                  :data1="fxl_sData"
                  :legendText="['发现率']"
                  @quCurrentClick="quCurrentFxlClick"
                ></right1>
              </div>
            </div>
            <div class="m-r-bottom">
              <div class="title-item animate__animated animate__fadeInUp">
                <div>隐患整改率</div>
                <div class="btns">
                  <div class="more">
                    <div
                      @click="openZcRight3('zc')"
                      :class="{ isActive: activeYhzglItem === 'zc' }"
                      class="zc"
                    >
                      自查
                    </div>
                    <div
                      @click="openJcRight3('jc')"
                      :class="{ isActive: activeYhzglItem === 'jc' }"
                      class="jc"
                    >
                      检查
                    </div>
                  </div>
                  <div @click="openRight3" class="m-btns">
                    <img src="@/assets/bigScreen1/more.png" />
                  </div>
                </div>
              </div>
              <div class="content1 animate__animated animate__fadeInUp">
                <right1
                  :key="1"
                  :xData="zgl_xData"
                  :data1="zgl_sData"
                  :legendText="['整改率']"
                  @quCurrentClick="quCurrentZglClick"
                ></right1>
              </div>
            </div>
            <div class="m-r-bottom">
              <div class="title-item animate__animated animate__fadeInUp">
                <div>隐患类型分析</div>
                <div class="btns">
                  <div @click="openRight4" class="m-btns">
                    <img src="@/assets/bigScreen1/more.png" />
                  </div>
                </div>
              </div>
              <div class="content1 animate__animated animate__fadeInUp">
                <!-- <pie3 :data="yhqxzbData" /> -->
                <pieCharts :pieData="yhqxzbData" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <chart2Modal
        v-if="showChart2"
        :title="titleChart1"
        :title2="titleChart2"
        :CurrentLevel="current2Level"
        @backFn="backChartFn"
        @changeModalVisibe="changeChart2Visibe"
      >
        <template v-slot:customContent>
          <div class="table-style">
            <right1
              v-if="titleChart1 === '自查覆盖率'"
              :key="1"
              :limit="[0, 13]"
              :isLoop="false"
              :isLevel2="true"
              :xData="zcl_xData2"
              :data1="zcl_sData2"
              :legendText="['自查率']"
              :grid="{
                top: '23%',
                right: '1%',
                left: '5%',
                bottom: '10%',
              }"
              @quCurrentClick="quCurrentZclClick"
            ></right1>
            <right1
              v-if="titleChart1 === '隐患发现率'"
              :key="1"
              :limit="[0, 13]"
              :isLoop="false"
              :isLevel2="true"
              :xData="fxl_xData2"
              :data1="fxl_sData2"
              :legendText="['发现率']"
              :grid="{
                top: '23%',
                right: '1%',
                left: '5%',
                bottom: '10%',
              }"
              @quCurrentClick="quCurrentFxlClick"
            ></right1>
            <right1
              v-if="titleChart1 === '隐患整改率'"
              :key="1"
              :limit="[0, 13]"
              :isLoop="false"
              :isLevel2="true"
              :xData="zgl_xData2"
              :data1="zgl_sData2"
              :legendText="['整改率']"
              :grid="{
                top: '23%',
                right: '1%',
                left: '5%',
                bottom: '10%',
              }"
              @quCurrentClick="quCurrentZglClick"
            ></right1>
          </div>
        </template>
      </chart2Modal>
      <detailModal
        v-if="showDetail"
        :title="tableTitle"
        :title2="title2"
        :CurrentLevel="CurrentLevel"
        @backFn="backFn"
        @changeModalVisibe="changeModalVisibe"
      >
        <template v-slot:customContent>
          <div class="table-style">
            <Tables
              ref="TablesRef"
              :tableData="zcQuList"
              v-if="tableTitle === '自查率'"
              @updateCurrentQu="updateCurrentQu"
            />
            <Tables1
              ref="Tables1Ref"
              :tableData="jcQuList"
              v-if="tableTitle === '检查率'"
              @updateCurrentQu="updateCurrentQu"
            />
            <Tables2
              ref="Tables2Ref"
              :tableData="hcQuList"
              v-if="tableTitle === '核查率'"
              @updateCurrentQu="updateCurrentQu"
            />
            <Tables3
              :tableData="zcQkBjList"
              :columns="zcQkBjColumn"
              v-if="tableTitle === '近7日自查情况'"
            />
            <Tables4
              :tableData="tableData"
              v-if="tableTitle === '自防自救力量建设'"
            />
            <Tables5
              :tableData="listData"
              v-if="tableTitle === '宣传警示开展情况'"
            />
            <Tables6 :tableData="allTableList" v-if="tableTitle === '统计'" />
            <!-- <Tables7
              :tableData="allTableList"
              v-if="tableTitle === '自查隐患数量'"
            /> -->
          </div>
        </template>
      </detailModal>
      <chartModal
        v-if="showChart"
        :title="chartTitle"
        @changeModalVisibe="changeChartVisibe"
      >
        <template v-slot:customContent>
          <div class="chart-style">
            <line1
              v-if="chartTitle === '人员疏散通道建设情况'"
              :key="currentIndex"
              :limit="[0, 20]"
              :isLoop="false"
              :xData="rysstdjsXData"
              :data1="zzzdfaData"
              :data2="zzsgData"
              :data3="ywcData"
              :grid="{
                top: '15%',
                left: '5%',
                right: '5%',
                bottom: '5%',
                containLabel: true,
              }"
            ></line1>
            <bar1
              v-if="chartTitle === '消防隐患处理情况'"
              :limit="[0, 20]"
              :isLoop="false"
              :xData="xfyhclxData"
              :data1="yhslData"
              :data2="zgslData"
              :legendText="xfyhclText"
              :grid="{
                top: '15%',
                left: '5%',
                right: '5%',
                bottom: '5%',
                containLabel: true,
              }"
            ></bar1>
            <right1
              v-if="chartTitle === '清理室内电动自行车情况'"
              :key="11"
              :limit="[0, 13]"
              :isLoop="false"
              style="padding: 10px 0 0 20px"
              :data1="ddc_Data"
              :data2="ccql_Data"
              :xData="qlddc_xData"
              :grid="{
                top: '15%',
                left: '5%',
                right: '5%',
                bottom: '5%',
                containLabel: true,
              }"
            ></right1>
            <pieCharts :pieData="yhqxzbData" v-if="chartTitle === '隐患类型分析'"/>
            <!-- <pie3 :data="yhqxzbData"  v-if="chartTitle === '隐患类型分析'"/> -->
          </div>
        </template>
      </chartModal>
    </div>
  </template>
  <script setup>
  import { ref, reactive, computed, onMounted, onBeforeMount } from 'vue'
  import { useRouter } from 'vue-router'
  import stat from './component/childComponent/stat.vue'
  import { CountTo } from 'vue3-count-to'
  import url5 from '@/assets/bigScreen/costa-bg.png'
  import url1 from '@/assets/bigScreen1/index/zzrks.png'
  import url2 from '@/assets/bigScreen1/index/czfjs.png'
  import url3 from '@/assets/bigScreen1/index/ddzxcs.png'
  import url4 from '@/assets/bigScreen1/index/qtjjyt.png'
  import urlzc from '@/assets/bigScreen1/index/zc.png'
  import urljc from '@/assets/bigScreen1/index/jc.png'
  import line1 from '@/Pages/bigScreen/components/index/line1.vue' // 人员疏散通道建设情况
  import bar1 from '@/Pages/bigScreen/components/index/bar1.vue' // 消防隐患处理情况
  import left1 from '@/Pages/bigScreen/components/index/left1.vue' // 电动自行车情况
  import right1 from '@/Pages/bigScreen/components/index/right1.vue' // 右侧的柱状图

  import barCharts from '@/Pages/bigScreen/components/baseInfo/charts/barCharts.vue'
  import nmgMap from '@/Pages/bigScreen/map/nmgMap.vue' // 地图
  import pie1 from '@/Pages/bigScreen/components/index/pie1.vue' // 今日各区县自查情况
  import pie2 from '@/Pages/bigScreen/components/index/pie2.vue' // 隐患类型分析
  import pie3 from '@/Pages/bigScreen/components/index/pie3.vue' // 隐患类型分析
  import pieCharts from '@/Pages/bigScreen/components/index/pieCharts.vue'
  //
  // import left1 from '@/Pages/bigScreen/components/left1.vue'
  // import left3 from '@/Pages/bigScreen/components/left3.vue'

  import right2 from '@/Pages/bigScreen/components/index/right2.vue'
  import right3 from '@/Pages/bigScreen/components/index/right3.vue'
  import list1 from '@/Pages/bigScreen/components/index/list1.vue'
  import list2 from '@/Pages/bigScreen/components/index/list2.vue'
  import list3 from '@/Pages/bigScreen/components/index/list3.vue'

  import detailModal from '@/Pages/bigScreen/components/detailModal.vue'
  import chart2Modal from '@/Pages/bigScreen/components/chart2Modal.vue'
  import chartModal from '@/Pages/bigScreen/components/chartModal.vue'
  import Tables from '@/Pages/bigScreen/components/Tables.vue'
  import Tables1 from '@/Pages/bigScreen/components/Tables1.vue'
  import Tables2 from '@/Pages/bigScreen/components/Tables2.vue'
  import Tables3 from '@/Pages/bigScreen/components/Tables3.vue'
  import Tables4 from '@/Pages/bigScreen/components/Tables4.vue'
  import Tables5 from '@/Pages/bigScreen/components/Tables5.vue'
  import Tables6 from '@/Pages/bigScreen/components/Tables6.vue'
  import Tables7 from '@/Pages/bigScreen/components/Tables7.vue'

  import {
    getCheckrate,
    getBaseInfoIndex,
    getBaseInfoRysstdjsqk,
    getBaseInfoXfyhclqk,
    getTopList,
    getBottomQuList,
    getBottomData,
    getBaseInfoDdcData,
    getBaseInfoZfZjData,
    getBaseInfoXcKzData,
    getBaseInfoMapData, // 地图
    getBaseInfoZCQxData,
    getBaseInfoJCQxData, // 检查
    getBaseInfoHCQxData, // 核查
    getBaseInfoZCQKBJData, // 近7日自查情况（展示没接口）
    getBaseInfoAllData, // 共涉及
    getBaseInfoAllTableData, // 共涉及表格
  } from '@/api/index.js'
  import {
    getRysstdData,
    getDDzxcwgqkData,
    getHlccqkData,
    getXcjskzqkData,
    getQlyhsyqqkData,
    getTopCardData,
    getBaseInfoData,
    getBaseJSInfoData,
    getFglData, // 自查覆盖率
    getYhfxlData,
    getYhzglData,
    getYhlxfxData,
  } from '@/api/indexNew.js'

  const currentIndex = ref(1)
  const router = useRouter()
  const dates = ref('') // 日期
  const activeZcfxlItem = ref('zc') //  自查覆盖率 - 默认按钮高亮
  const activeYhfxlItem = ref('zc') //  隐患发现率 - 默认按钮高亮
  const activeYhzglItem = ref('zc') //  隐患整改率 - 默认按钮高亮
  const params = ref({
    city: undefined,
  })
  const timeRange = ref(['2024-01-01', '2024-01-11'])
  const defaultTime1 = new Date(2000, 1, 1) // '12:00:00'

  // 1.人员疏散通道
  const rysstdData = ref([])
  const _getRysstdData = async () => {
    let res = await getRysstdData()
    rysstdData.value = res.data.data
  }

  // 2.电动自行车违规情况
  const ddzxcXData = ref([])
  const ddzxcFXData = ref([])
  const ddzxcQLData = ref([])
  const _getDDzxcwgqkData = async () => {
    let res = await getDDzxcwgqkData()
    ddzxcXData.value = res.data.data.name
    ddzxcFXData.value = res.data.data.fx
    ddzxcQLData.value = res.data.data.zg
  }

  // 3.护栏拆除情况
  const hlccData = ref([
    {
      name: '朝阳区',
      dbl: '10.5',
      ydb: '1980',
    },
    {
      name: '丰台区',
      dbl: '2.74',
      ydb: '48',
    },
    {
      name: '石景山区',
      dbl: '11.7',
      ydb: '121',
    },
    {
      name: '海淀区',
      dbl: '9.87',
      ydb: '440',
    },
    {
      name: '门头沟区',
      dbl: '7.77',
      ydb: '81',
    },
    {
      name: '房山区',
      dbl: '0.52',
      ydb: '29',
    },
    {
      name: '通州区',
      dbl: '3.27',
      ydb: '594',
    },
    {
      name: '顺义区',
      dbl: '0.72',
      ydb: '104',
    },
    {
      name: '昌平区',
      dbl: '7.89',
      ydb: '1364',
    },
    {
      name: '大兴区',
      dbl: '4.59',
      ydb: '751',
    },
    {
      name: '怀柔区',
      dbl: '4.23',
      ydb: '147',
    },
    {
      name: '平谷区',
      dbl: '5.1',
      ydb: '95',
    },
    {
      name: '密云区',
      dbl: '4.87',
      ydb: '83',
    },
    {
      name: '延庆区',
      dbl: '0.98',
      ydb: '24',
    },
  ])
  const _getHlccqkData = async () => {
    let res = await getHlccqkData()
    hlccData.value = res.data.data
  }
  // 4.宣传警示开展情况
  const xcjskzData = ref([
    {
      name: '朝阳区',
      dbl: '10.5',
      ydb: '1980',
    },
    {
      name: '丰台区',
      dbl: '2.74',
      ydb: '48',
    },
    {
      name: '石景山区',
      dbl: '11.7',
      ydb: '121',
    },
    {
      name: '海淀区',
      dbl: '9.87',
      ydb: '440',
    },
    {
      name: '门头沟区',
      dbl: '7.77',
      ydb: '81',
    },
    {
      name: '房山区',
      dbl: '0.52',
      ydb: '29',
    },
    {
      name: '通州区',
      dbl: '3.27',
      ydb: '594',
    },
    {
      name: '顺义区',
      dbl: '0.72',
      ydb: '104',
    },
    {
      name: '昌平区',
      dbl: '7.89',
      ydb: '1364',
    },
    {
      name: '大兴区',
      dbl: '4.59',
      ydb: '751',
    },
    {
      name: '怀柔区',
      dbl: '4.23',
      ydb: '147',
    },
    {
      name: '平谷区',
      dbl: '5.1',
      ydb: '95',
    },
    {
      name: '密云区',
      dbl: '4.87',
      ydb: '83',
    },
    {
      name: '延庆区',
      dbl: '0.98',
      ydb: '24',
    },
  ])
  const _getXcjskzqkData = async () => {
    let res = await getXcjskzqkData()
    xcjskzData.value = res.data.data
  }

  // 5.清理液化石油气情况
  const qlyhsyqData = ref([
    {
      name: '发现隐患数量',
      value: '0',
      // unit: '个',
    },
    {
      name: '清理隐患数量',
      value: '0',
      // unit: '个',
    },
    {
      name: '整改率',
      value: '0',
      // unit: '%',
    },
  ])
  const _getQlyhsyqqkData = async () => {
    let res = await getQlyhsyqqkData()
    qlyhsyqData.value = res?.data?.data
  }

  // 6.中间卡片
  const topList = ref([
    {
      name: '自查率',
      name1: '今日自查',
      name2: '昨日自查',
      percent: '20',
      unit: '栋',
      value1: '999999',
      value2: '0',
      url: urlzc,
    },
    {
      name: '检查率',
      name1: '今日检查',
      name2: '昨日检查',
      percent: '30',
      unit: '栋',
      value1: '0',
      value2: '999999',
      url: urljc,
    },
  ])
  const topCardParams1 = reactive({
    code: '',
    type: '1',
    startime: computed(() => timeRange.value[1]),
    endtime: computed(() => timeRange.value[1]),
  })
  const topCardParams2 = reactive({
    code: '',
    type: '2',
    startime: computed(() => timeRange.value[1]),
    endtime: computed(() => timeRange.value[1]),
  })
  const _getTopCardData1 = async () => {
    let res = await getTopCardData(topCardParams1)
    topList.value[0].percent = res.data.data.zcl[0]
    topList.value[0].value1 = res.data.data.zccount[0]
    topList.value[0].value2 = res.data.data.yesterday[0]
    topList.value[0].url = urlzc
  }
  const _getTopCardData2 = async () => {
    let res = await getTopCardData(topCardParams2)
    topList.value[1].percent = res.data.data.zcl[0]
    topList.value[1].value1 = res.data.data.jccount[0]
    topList.value[1].value2 = res.data.data.yesterday[0]
    topList.value[1].url = urljc
  }
  /**************************/
  // 自查率 区县
  const tableTitle = ref('')
  const zcQuList = ref([])

  // 点击tab
  const tabClick = async (item) => {
    // console.log('@item', item)
    tableTitle.value = item.name
    if (item.name === '自查率') {
      ZclFn()
    } else if (item.name === '检查率') {
      JclFn()
    } else if (item.name === '核查率') {
      HclFn()
    }
  }
  const ZclFn = async () => {
    let res = await getBaseInfoZCQxData()
    let list = res.data.data.items
    let modifiedList = list.map((item, index) => {
      item.index = index + 1
      item.yhcount = Number(item.yhcount)
      item.zccount = Number(item.zccount)
      // item.zcl = Number(item.zcl)
      item.zcount = Number(item.zcount)
      item.zgcount = Number(item.zgcount)
      return item
    })
    zcQuList.value = modifiedList
    if (zcQuList.value.length > 0) {
      showDetail.value = true
    }
  }
  // 检查
  const jcQuList = ref([])
  const JclFn = async () => {
    let res = await getBaseInfoJCQxData()
    let list = res.data.data.items
    let modifiedList = list.map((item, index) => {
      item.index = index + 1
      item.yhcount = Number(item.yhcount)
      item.zccount = Number(item.zccount)
      // item.zcl = Number(item.zcl)
      item.zcount = Number(item.zcount)
      item.zgcount = Number(item.zgcount)
      return item
    })
    jcQuList.value = modifiedList
    if (jcQuList.value.length > 0) {
      showDetail.value = true
    }
  }
  const title2 = ref('')
  const CurrentLevel = ref(1)
  const updateCurrentQu = (newCurrentQu, newCurrentLevel) => {
    let result = newCurrentQu.join('-')
    title2.value = result ? `-${result} ` : ''
    CurrentLevel.value = newCurrentLevel
  }
  const TablesRef = ref(null)
  const Tables1Ref = ref(null)
  const Tables2Ref = ref(null)
  const backFn = () => {
    if (tableTitle.value === '自查率') {
      TablesRef.value.backFn()
    } else if (tableTitle.value === '检查率') {
      Tables1Ref.value.backFn()
    } else if (tableTitle.value === '核查率') {
      Tables2Ref.value.backFn()
    }
  }

  // 核查
  const hcQuList = ref([])
  const HclFn = async () => {
    let res = await getBaseInfoHCQxData()
    let list = res.data.data.items
    let modifiedList = list.map((item, index) => {
      item.index = index + 1
      item.yhcount = Number(item.yhcount)
      item.zccount = Number(item.zccount)
      // item.zcl = Number(item.zcl)
      item.zcount = Number(item.zcount)
      item.zgcount = Number(item.zgcount)
      return item
    })
    hcQuList.value = modifiedList
    if (hcQuList.value.length > 0) {
      showDetail.value = true
    }
    console.log('@res--核查', hcQuList.value)
  }
  /**************************/

  // 7.地图
  const mapKey = ref(1)
  const areaTypeMap = ref([])
  const mapData = ref([])
  const _getMapDataList = async () => {
    let res = await getBaseInfoMapData()
    let list = res.data.data.items
    mapData.value = list
  }

  // 8. 基本信息
  const baseList = ref([
    {
      name: '租住人口数',
      value: 0,
      unit: '栋',
      url: url5,
    },
    {
      name: '出租房间数',
      value: 0,
      unit: '栋',
      url: url5,
    },
    {
      name: '电动自行车数量',
      value: 0,
      unit: '处',
      url: url5,
    },
    {
      name: '其他经营业态',
      value: 0,
      unit: '处',
      url: url5,
    },
  ])
  const _getBaseInfoData = async () => {
    let res = await getBaseInfoData()
    let arr = filterNames(res.data.data, [
      '租住人口数量',
      '出租房间数量',
      '电动自行车数量',
      '其他经营业态',
    ])
    arr.map((item, index) => {
      item.url = url5
    })
    baseList.value = arr
  }
  const filterNames = (arr, targetNames) => {
    const filteredObjects = []
    for (const item of arr) {
      if (targetNames.includes(item.name)) {
        filteredObjects.push(item)
      }
    }
    return filteredObjects
  }
  // 9. 基础建设情况
  const baseJsList = ref([
    {
      name: '充电设置建设情况',
      value: 0,
      unit: '栋',
    },
    {
      name: '建设消防通道',
      value: 0,
      unit: '栋',
    },
    {
      name: '建设水源数量',
      value: 0,
      unit: '处',
    },
    {
      name: '自防自救建设情况',
      value: 0,
      unit: '处',
    },
  ])
  const _getBaseJSInfoData = async () => {
    let res = await getBaseJSInfoData()
    let arr = filterNames(res.data.data, [
      '现有充电接口',
      '消防车通道数量',
      '消防水池数量',
      '配置消防水泵',
    ])
    arr.map((item, index) => {
      item.url = url5
    })
    baseJsList.value = arr
  }

  // 10.自查覆盖率
  const zcl_xData = ref([])
  const zcl_sData = ref([])
  const fglParams = reactive({
    code: '',
    type: '1',
    startime: computed(() => timeRange.value[0]),
    endtime: computed(() => timeRange.value[1]),
  })
  const _getFglData = async () => {
    let res = await getFglData(fglParams)
    let data = res?.data?.data
    const arr = convertDataToArray(data, 'zcl') // 指定 zcl 字段名
    zcl_xData.value = data?.name
    zcl_sData.value = arr
  }
  const convertDataToArray = (data, Field) => {
    const arr = []
    const codes = data.code
    const zcls = data[Field] // 根据字段名获取对应的 zcl 值
    for (let i = 0; i < codes.length; i++) {
      arr.push({
        value: zcls[i],
        code: codes[i],
      })
    }
    return arr
  }
  // 自查 - 按钮
  const openZcRight1 = (item) => {
    activeZcfxlItem.value = item
    fglParams.type = '1'
    _getFglData()
  }
  // 检查 - 按钮
  const openJcRight1 = (item) => {
    activeZcfxlItem.value = item
    fglParams.type = '2'
    _getFglData()
  }
  // 更多 - 按钮
  const openRight1 = () => {
    // chartTitle.value = '清理室内电动自行车情况'
    // showChart.value = true
    // console.log('@Xdata', qlddc_xData)
  }
  // 点击 自查覆盖率的柱子
  const titleChart1 = ref('')
  const titleChart2 = ref('')
  const current2Level = ref(1) // 1 是乡镇
  const zcl_xData2 = ref([])
  const zcl_sData2 = ref([])
  const zcl_xData2_xz = ref([])
  const zcl_sData2_xz = ref([])
  const zcl_xData2_cun = ref([])
  const zcl_sData2_cun = ref([])
  const level1Title = ref('')
  const level2Title = ref('')
  const quCurrentZclClick = async (params) => {
    let code = params.data.code
    fglParams.code = code
    if (current2Level.value < 3) {
      let res = await getFglData(fglParams)
      let data = res?.data?.data
      if (data) {
        current2Level.value++
        CurrentLevel.value = current2Level.value
        const arr = convertDataToArray(data, 'zcl') // 指定 zcl 字段名
        if (current2Level.value === 2) {
          zcl_xData2_xz.value = data?.name
          zcl_sData2_xz.value = arr
          level1Title.value = params.name
          titleChart1.value = '自查覆盖率'
          titleChart2.value = `-${level1Title.value}`
          zcl_xData2.value = zcl_xData2_xz.value
          zcl_sData2.value = zcl_sData2_xz.value
        }
        if (current2Level.value === 3) {
          zcl_xData2_cun.value = data?.name
          zcl_sData2_cun.value = arr
          level2Title.value = params.name
          titleChart1.value = '自查覆盖率'
          titleChart2.value = `-${level1Title.value}-${level2Title.value}`
          zcl_xData2.value = zcl_xData2_cun.value
          zcl_sData2.value = zcl_sData2_cun.value
        }
      }
      showChart2.value = true
    }
  }
  // 点击柱状的弹框
  const showChart2 = ref(false)
  const changeChart2Visibe = (data) => {
    showChart2.value = data // 关闭弹框
    titleChart2.value = ''
    fglParams.code = ''
    fxlParams.code = ''
    zglParams.code = ''
    current2Level.value = 1
  }
  // 弹框返回
  const backChartFn = () => {
    current2Level.value = 2
    titleChart2.value = `-${level1Title.value}`
    if (titleChart1.value === '自查覆盖率') {
      zcl_xData2.value = zcl_xData2_xz.value
      zcl_sData2.value = zcl_sData2_xz.value
    } else if (titleChart1.value === '隐患发现率') {
      fxl_xData2.value = fxl_xData2_xz.value
      fxl_sData2.value = fxl_sData2_xz.value
    } else if (titleChart1.value === '隐患整改率') {
      zgl_xData2.value = zgl_xData2_xz.value
      zgl_xData2.value = zgl_xData2_xz.value
    }
  }
  // 11.隐患发现率
  const fxl_xData = ref([])
  const fxl_sData = ref([])
  const fxlParams = reactive({
    code: '',
    type: '1',
    startime: computed(() => timeRange.value[0]),
    endtime: computed(() => timeRange.value[1]),
  })
  const _getFxlData = async () => {
    let res = await getYhfxlData(fxlParams)
    let data = res?.data?.data
    const arr = convertDataToArray(data, 'yhl')
    fxl_xData.value = data?.name
    fxl_sData.value = arr
  }
  // 自查 - 按钮
  const openZcRight2 = (item) => {
    activeYhfxlItem.value = item
    fxlParams.type = '1'
    _getFxlData()
  }
  // 检查 - 按钮
  const openJcRight2 = (item) => {
    activeYhfxlItem.value = item
    fxlParams.type = '2'
    _getFxlData()
  }
  // 更多 - 按钮
  const openRight2 = () => {
    // tableTitle.value = '自防自救力量建设'
    // showDetail.value = true
  }
  // 点击发现率
  const fxl_xData2 = ref([])
  const fxl_sData2 = ref([])
  const fxl_xData2_xz = ref([])
  const fxl_sData2_xz = ref([])
  const fxl_xData2_cun = ref([])
  const fxl_sData2_cun = ref([])
  const quCurrentFxlClick = async (params) => {
    let code = params.data.code
    fxlParams.code = code
    if (current2Level.value < 3) {
      let res = await getYhfxlData(fxlParams)
      let data = res?.data?.data
      if (data) {
        current2Level.value++
        CurrentLevel.value = current2Level.value
        const arr = convertDataToArray(data, 'yhl') // 指定 zcl 字段名
        if (current2Level.value === 2) {
          fxl_xData2_xz.value = data?.name
          fxl_sData2_xz.value = arr
          level1Title.value = params.name
          titleChart1.value = '隐患发现率'
          titleChart2.value = `-${level1Title.value}`
          fxl_xData2.value = fxl_xData2_xz.value
          fxl_sData2.value = fxl_sData2_xz.value
        }
        if (current2Level.value === 3) {
          fxl_xData2_cun.value = data?.name
          fxl_sData2_cun.value = arr
          level2Title.value = params.name
          titleChart1.value = '隐患发现率'
          titleChart2.value = `-${level1Title.value}-${level2Title.value}`
          fxl_xData2.value = fxl_xData2_cun.value
          fxl_sData2.value = fxl_sData2_cun.value
        }
      }
      showChart2.value = true
    }
  }

  // 12.隐患整改率
  const zgl_xData = ref([])
  const zgl_sData = ref([])
  const zglParams = reactive({
    code: '',
    type: '1',
    startime: computed(() => timeRange.value[0]),
    endtime: computed(() => timeRange.value[1]),
  })
  const _getYhzglData = async () => {
    let res = await getYhzglData(zglParams)
    let data = res?.data?.data
    const arr = convertDataToArray(data, 'zgl')
    zgl_xData.value = data?.name
    zgl_sData.value = arr
  }
  // 自查 - 按钮
  const openZcRight3 = (item) => {
    activeYhzglItem.value = item
    zglParams.type = '1'
    _getYhzglData()
  }
  // 检查 - 按钮
  const openJcRight3 = (item) => {
    activeYhzglItem.value = item
    zglParams.type = '2'
    _getYhzglData()
  }
  // 更多 - 按钮
  const openRight3 = () => {
    // tableTitle.value = '宣传警示开展情况'
    // showDetail.value = true
  }
  const zgl_xData2 = ref([])
  const zgl_sData2 = ref([])
  const zgl_xData2_xz = ref([])
  const zgl_sData2_xz = ref([])
  const zgl_xData2_cun = ref([])
  const zgl_sData2_cun = ref([])
  const quCurrentZglClick = async (params) => {
    let code = params.data.code
    zglParams.code = code
    if (current2Level.value < 3) {
      let res = await getYhzglData(zglParams)
      let data = res?.data?.data
      if (data) {
        current2Level.value++
        CurrentLevel.value = current2Level.value
        const arr = convertDataToArray(data, 'zgl') // 指定 zcl 字段名
        if (current2Level.value === 2) {
          zgl_xData2_xz.value = data?.name
          zgl_sData2_xz.value = arr
          level1Title.value = params.name
          titleChart1.value = '隐患整改率'
          titleChart2.value = `-${level1Title.value}`
          zgl_xData2.value = zgl_xData2_xz.value
          zgl_sData2.value = zgl_sData2_xz.value
        }
        if (current2Level.value === 3) {
          zgl_xData2_cun.value = data?.name
          zgl_sData2_cun.value = arr
          level2Title.value = params.name
          titleChart1.value = '隐患整改率'
          titleChart2.value = `-${level1Title.value}-${level2Title.value}`
          zgl_xData2.value = zgl_xData2_cun.value
          zgl_sData2.value = zgl_sData2_cun.value
        }
      }
      showChart2.value = true
    }
  }

  // 13.隐患类型分析
  const yhqxzbData = ref([
    // {
    //   name: '无旱1',
    //   value: '20',
    // },
  ])
  const yhlxfxParams = reactive({
    code: '',
    type: '1',
    // startime: computed(() => timeRange.value[0]),
    // endtime: computed(() => timeRange.value[1]),
    startime: '2023-01-01',
    endtime: '2026-01-01',
  })
  const _getYhlxfxData = async () => {
    let res = await getYhlxfxData(yhlxfxParams)
    let data = res?.data?.data
    let newArr = data.map(({ name, percentage_total_count }) => ({
      value: percentage_total_count,
      name,
    }))
    yhqxzbData.value = newArr
  }
  const openRight4 = () => {
    chartTitle.value = '隐患类型分析'
    showChart.value = true
  }
  // 时间更新
  const timeUpDate = () => {
    _getFglData() // 自查覆盖率
    _getFxlData() // 隐患发现率
    _getYhzglData() // 隐患整改率
    _getYhlxfxData() // 隐患类型分析
  }

  // 2.人员疏散通道情况
  const rysstdjsXData = ref([])
  const zzzdfaData = ref([]) // 正在制定方案
  const zzsgData = ref([]) // 正在施工
  const ywcData = ref([]) // 已完成
  const _getBaseInfoRysstdjsqk = async () => {
    let res = await getBaseInfoRysstdjsqk()
    rysstdjsXData.value = res.data.data.x
    zzzdfaData.value = res.data.data.zzzdfa
    zzsgData.value = res.data.data.zzsggz
    ywcData.value = res.data.data.ywc
  }
  const showChart = ref(false)
  const chartTitle = ref('')
  const changeChartVisibe = (data) => {
    showChart.value = data
  }
  const openLine1 = () => {
    chartTitle.value = '人员疏散通道建设情况'
    showChart.value = true
  }

  // 3.消防隐患处理情况
  // 隐患处理总数
  const xfyhclxData = ref([])
  const yhslData = ref([])
  const zgslData = ref([])
  const xfyhclText = ref(['隐患数量', '整改数量'])
  const _getBaseInfoXfyhclqk = async () => {
    let res = await getBaseInfoXfyhclqk()
    xfyhclxData.value = res.data.data.x
    zgslData.value = res.data.data.zgcount
    yhslData.value = res.data.data.yhcount
  }

  const openBar1 = () => {
    chartTitle.value = '消防隐患处理情况'
    showChart.value = true
  }

  // 6.今日各区县自查情况 （未完成）
  const quList = ref([])
  const _getBottomQuList = async () => {
    let params = {
      id: '110000',
    }
    let res = await getBottomQuList(params)
    quList.value = res.data.data
  }

  // 7.清理室内电动自行车
  const ddc_Data = ref([])
  const ccql_Data = ref([])
  const qlddc_xData = ref([])
  const _getBaseInfoDdcData = async () => {
    let res = await getBaseInfoDdcData()
    ddc_Data.value = res.data.data.zs
    ccql_Data.value = res.data.data.qlddcsl
    qlddc_xData.value = res.data.data.x
  }

  // 8.自防自救力量建设
  const tableData = ref([
    {
      region_name: '朝阳区',
      rkzs: '0',
      wxxfz: '0',
      zzxfd: '0',
    },
    {
      region_name: '丰台区',
      rkzs: '0',
      wxxfz: '0',
      zzxfd: '0',
    },
    {
      region_name: '石景山区',
      rkzs: '0',
      wxxfz: '0',
      zzxfd: '0',
    },
    {
      region_name: '海淀区',
      rkzs: '0',
      wxxfz: '0',
      zzxfd: '0',
    },
    {
      region_name: '门头沟区',
      rkzs: '0',
      wxxfz: '0',
      zzxfd: '0',
    },
    {
      region_name: '房山区',
      rkzs: '0',
      wxxfz: '0',
      zzxfd: '0',
    },
    {
      region_name: '通州区',
      rkzs: '0',
      wxxfz: '0',
      zzxfd: '0',
    },
    {
      region_name: '顺义区',
      rkzs: '0',
      wxxfz: '0',
      zzxfd: '0',
    },
    {
      region_name: '昌平区',
      rkzs: '0',
      wxxfz: '0',
      zzxfd: '0',
    },
    {
      region_name: '大兴区',
      rkzs: '0',
      wxxfz: '0',
      zzxfd: '0',
    },
    {
      region_name: '怀柔区',
      rkzs: '0',
      wxxfz: '0',
      zzxfd: '0',
    },
    {
      region_name: '平谷区',
      rkzs: '0',
      wxxfz: '0',
      zzxfd: '0',
    },
    {
      region_name: '密云区',
      rkzs: '0',
      wxxfz: '0',
      zzxfd: '0',
    },
    {
      region_name: '延庆区',
      rkzs: '0',
      wxxfz: '0',
      zzxfd: '0',
    },
  ])
  const _getBaseInfoZfZjData = async () => {
    let res = await getBaseInfoZfZjData()
    let list = res.data.data
    let modifiedList = list.map((item, index) => {
      item.index = index + 1
      item.rkzs = Number(item.rkzs)
      item.zzxfd = Number(item.zzxfd)
      item.wxxfz = Number(item.wxxfz)
      return item
    })
    tableData.value = modifiedList
  }

  // 9.宣传警示开展情况
  const listData = ref([
    // {
    //   region_name: '东城区',
    //   azgdjsbpsl: '0',
    //   jzfjs: '4',
    // },
    // {
    //   region_name: '西城区',
    //   azgdjsbpsl: '0',
    //   jzfjs: '0',
    // },
    {
      region_name: '朝阳区',
      azgdjsbpsl: '0',
      jzfjs: '0',
    },
    {
      region_name: '丰台区',
      azgdjsbpsl: '0',
      jzfjs: '0',
    },
    {
      region_name: '石景山区',
      azgdjsbpsl: '0',
      jzfjs: '0',
    },
    {
      region_name: '海淀区',
      azgdjsbpsl: '0',
      jzfjs: '0',
    },
    {
      region_name: '门头沟区',
      azgdjsbpsl: '0',
      jzfjs: '0',
    },
    {
      region_name: '房山区',
      azgdjsbpsl: '0',
      jzfjs: '0',
    },
    {
      region_name: '通州区',
      azgdjsbpsl: '0',
      jzfjs: '0',
    },
    {
      region_name: '顺义区',
      azgdjsbpsl: '0',
      jzfjs: '0',
    },
    {
      region_name: '昌平区',
      azgdjsbpsl: '0',
      jzfjs: '0',
    },
    {
      region_name: '大兴区',
      azgdjsbpsl: '0',
      jzfjs: '0',
    },
  ])

  const _getBaseInfoXcKzData = async () => {
    let res = await getBaseInfoXcKzData()
    let list = res.data.data
    let modifiedList = list.map((item, index) => {
      item.index = index + 1
      item.azgdjsbpsl = Number(item.azgdjsbpsl)
      item.jzfjs = Number(item.jzfjs)
      return item
    })
    listData.value = modifiedList
  }

  const chartKey = ref(1) // key
  //判断时间是否为个位数，如果时间为个位数就在时间之前补上一个“0”
  const check = (val) => {
    if (val < 10) {
      return '0' + val
    } else {
      return val
    }
  }
  const displayTime = () => {
    //获取系统当前的年、月、日、小时、分钟、毫秒
    let date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = date.getDate()
    let hour = date.getHours()
    let minutes = date.getMinutes()
    let seconds = date.getSeconds()
    dates.value = `${year}年${month}月${day}日 ${check(hour)}:${check(
      minutes
    )}:${check(seconds)}`
  }
  const currentDate = () => {
    let date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = date.getDate()
    // 往前推算的时间，推算 7 天前
    const daysToSubtract = 7
    const pastDate = new Date(date)
    pastDate.setDate(day - daysToSubtract)
    let pastYear = pastDate.getFullYear()
    let pastMonth = pastDate.getMonth() + 1
    let pastDay = pastDate.getDate()
    let past7Date = `${pastYear}-${check(pastMonth)}-${check(pastDay)}`
    let currentData = `${year}-${check(month)}-${check(day)}`
    timeRange.value = [`${past7Date}`, `${currentData}`]
  }

  //每隔1秒调用一次displayTime函数
  const start = () => {
    setInterval(() => {
      displayTime()
    }, 1000) //单位是毫秒
  }
  // 每隔 5分钟 调用一次
  const task10Min = () => {
    setInterval(() => {
      _getTopCardData1() // 卡片1
      _getTopCardData2() // 卡片2
      _getMapDataList() // 地图
      _getFglData() // 10.自查覆盖率
      _getFxlData() // 11.隐患发现率
      _getYhzglData() // 12.隐患整改率
      _getYhlxfxData() // 13.隐患类型分析
    }, 600000) // 10分钟的毫秒数 300000
  }
  const task1Day = () => {
    setInterval(() => {
      _getRysstdData() // 1.人员疏散通道
      _getDDzxcwgqkData() // 2.电动自行车违规情况
      _getHlccqkData() // 3.护栏拆除情况
      _getXcjskzqkData() // 4.宣传警示开展情况
      _getQlyhsyqqkData() // 5.清理液化石油气情况
      _getBaseInfoData() // 8.基本信息
      _getBaseJSInfoData() // 9.基础建设情况
    }, 600000 * 6 * 24) // 一天的毫秒数
  }
  onMounted(async () => {
    await currentDate()
    start()
    task10Min()
    task1Day()
    _getRysstdData()
    _getDDzxcwgqkData()
    _getHlccqkData()
    _getXcjskzqkData()
    _getTopCardData1() // 中间卡片1
    _getTopCardData2() // 中间卡片2
    _getBaseInfoData() //
    _getBaseJSInfoData() //
    _getFglData() // 自查覆盖率
    _getFxlData() // 隐患发现率
    _getYhzglData() // 隐患整改率
    _getYhlxfxData() // 隐患类型分析
    _getQlyhsyqqkData()
    ///////////////////
    // _getBaseInfoIndex() // 获取基本信息
    _getBaseInfoRysstdjsqk() // 人员疏散通道建设情况
    _getBaseInfoXfyhclqk() // 消防隐患处理情况
    // _getTopList() // 卡片
    _getMapDataList() // 地图
    _getBottomQuList() // 区县列表
    // _getBottomData() // 中间下部
    _getBaseInfoDdcData() // 清理室内电动自行车情况
    _getBaseInfoZfZjData() // 自防自救力量建设
    _getBaseInfoXcKzData() // 宣传警示开展情况
    // _getBaseInfoAllData()
    // _getBaseInfoAllTableData() // 统计共涉及
  })
  const _getCheckrate = async () => {
    let res = await getCheckrate()
    console.log('@自查率', res)
  }
  const getMapList = (id) => {
    params.value.city = id
    // _getPersonList()
    // _getDemandList()
    // _getAchievementList()
    // _getOrgList()
    // _getRegisterList()
    // _getDynamicList()
    // _getPolicyList()
    // _getCompanyList()
    chartKey.value++
  }

  const resetMap = () => {
    chartKey.value++
    mapKey.value++
    params.value.city = undefined
    _getPersonList()
    _getDemandList()
    _getAchievementList()
    _getOrgList()
    _getRegisterList()
    _getDynamicList()
    _getPolicyList()
    _getCompanyList()
  }

  // 切换
  const gotoScreen = (act) => {
    console.log(act, 'gxn')
    router.push({
      path: '/bigScreen',
      query: {
        act: act,
      },
    })
  }
  const goFn = () => {
    console.log('header====')
  }

  const showDetail = ref(false)
  const type = ref()
  const changeModalVisibe = (data) => {
    showDetail.value = data
    CurrentLevel.value = 1
    title2.value = ''
  }
  // 选择日期的回调
  const timeChange = (value) => {
    timeRange.value = [value[0], value[1]]
    timeUpDate()
  }
  </script>

  <style scoped="scoped" lang="scss">
  @font-face {
    font-family: 'ffa';
    src: url(@/assets/bigScreen/fonts/DS-DIGIB.TTF);
  }
  ul,
  li {
    list-style: none;
  }
  .big-box {
    // background-color: #e7250c;
    background-color: #071c3b;
    height: 100vh;
    overflow: hidden;
    .header {
      // text-align: center;
      position: relative;
      height: 7.5rem;
      // border: 1px solid red;
      background-image: url('@/assets/bigScreen1/header.png');
      background-repeat: no-repeat;
      background-size: 100% 40%;
      display: flex;
      justify-content: space-between;
      padding: 0 1rem;
      .h-left {
        width: 30%;
        height: 100%;
        // border: 1px solid sandybrown;
        display: flex;
        align-items: center;
        .time {
          width: 60%;
          // border: 1px solid red;
          margin-top: 1rem;
          line-height: 4rem;
          font-size: 1vw;
          height: 4rem;
          display: flex;
          align-items: center;
          .date {
            margin-left: 2rem;
          }
        }
        .tq {
          width: 40%;
          margin-top: 1rem;
          line-height: 4rem;
          font-size: 1vw;
          height: 4rem;
          display: flex;
          align-items: center;
          img {
            width: 32px;
            height: 32px;
          }
          .tq-text {
            margin-left: 2rem;
          }
        }
      }
      .h-center {
        width: 30%;
        height: 100%;
        // border: 1px solid sandybrown;
        line-height: 8rem;
        .title {
          color: #23b9eb;
          text-align: center;
          font-size: 1.8vw;
          font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
          font-weight: bold;
        }
      }
      .h-right {
        width: 30%;
        height: 100%;
        // border: 1px solid sandybrown;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .time-title {
          line-height: 5rem;
          font-size: 1vw;
          height: 4rem;
        }
        .time-content {
          margin-top: 1rem;
          ::v-deep .el-input__wrapper {
            background-color: transparent;
          }
          // ::v-deep .el-date-range-picker {
          //   background-color: transparent;
          // }
          // ::v-deep .el-date-range-picker__time-header {
          //   background-color: red;
          // }
        }
      }
    }
    .content {
      height: calc(100vh - 9rem);
      padding: 0 1rem 1rem;
      // border: 1px solid red;
      .box-con {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        .main-l {
          width: 25%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .m-l-top {
            height: 20%;
            border: 2px solid #274187;
            // border-radius: 6px;
            .content1 {
              height: calc(100% - 4rem);
              // border: 1px solid red;
              .sta-box {
                height: 100%;
                padding: 2rem;
                display: flex;
                // align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                box-sizing: border-box;

                @keyframes fadenum {
                  100% {
                    transform: rotate(360deg);
                  }
                }

                .sta-li {
                  width: calc((100% - 2rem) / 2);
                  height: calc((100% - 2rem) / 2);
                  border-radius: 0.6rem;
                  background: #00183b;
                  border: 0.1rem solid rgba(45, 205, 255, 0.17);
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                  padding: 0 0rem;
                  &:nth-child(n + 3) {
                    margin-top: 2rem;
                  }
                  img {
                    width: 6rem;
                    height: 6rem;
                    animation: fadenum 2s infinite;
                  }
                  .sta-li-r {
                    // border: 1px solid red;
                    height: 4rem;
                    .text {
                      font-size: 0.8vw;
                      line-height: 1.7rem;
                      color: rgba(255, 255, 255, 0.64);
                      margin-bottom: 1rem;
                    }
                    .count {
                      text-align: right;
                      font-size: 1.1vw;
                      line-height: 2.2rem;
                      color: rgba(255, 255, 255, 0.87);
                      font-weight: bold;
                    }
                  }
                }
              }
            }
          }
          .m-l-center {
            height: 20%;
            border: 2px solid #274187;
            // border-radius: 6px;
            .content1 {
              height: calc(100% - 4rem);
              // border: 1px solid red;
            }
          }
          .m-l-bottom {
            height: 20%;
            border: 2px solid #274187;
            .content1 {
              height: calc(100% - 4rem);
            }
          }
          .m-l-bottom1 {
            height: 15%;
            border: 2px solid #274187;
            .content1 {
              height: calc(100% - 4rem);
            }
          }
        }
        .main-c {
          width: 49%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          // border: 1px solid red;
          .m-c-top {
            height: 15%;
            border: 2px solid #274187;
            width: 100%;
            .top-list {
              display: flex;
              justify-content: space-between;
              // border: 1px solid red;
              height: 100%;
              width: 100%;
              .l-item {
                background: url('@/assets/bigScreen1/item.png') no-repeat;
                background-size: 100% 100%;
                height: calc(100% - 2rem);
                width: 45%;
                display: flex;
                justify-content: space-between;
                padding: 1rem;
                cursor: pointer;
                .icon {
                  width: 20%;
                  // border: 1px solid red;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
                .zcl {
                  width: 22%;
                  border: 2px solid rgb(16, 248, 198, 0.3);
                  // box-shadow: 5px 5px 5px rgba(94, 245, 175, 0.3),
                  //   -5px -5px 5px rgba(94, 245, 175, 0.3);
                  border-radius: 5%;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  .top {
                    height: 4rem;
                    // border: 1px solid red;
                    line-height: 4rem;
                    font-size: 0.9vw;
                  }
                  .bottom {
                    font-size: 1.2vw;
                    display: flex;
                    align-items: center;
                    color: #20dbfd;
                  }
                }
                .jzcs {
                  width: 52%;
                  // border: 2px solid rgb(16, 248, 198, 0.3);
                  // box-shadow: 5px 5px 5px rgba(94, 245, 175, 0.3),
                  //   -5px -5px 5px rgba(94, 245, 175, 0.3);
                  border-radius: 5%;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: flex-start;
                  .item {
                    .title {
                      font-size: 1vw;
                      font-style: italic;
                    }
                    .value {
                      font-size: 1vw;
                      color: #25fab3;
                    }
                    .unit {
                      font-size: 1vw;
                      margin-left: 1rem;
                      color: #20dbfd;
                      font-style: italic;
                    }
                  }
                }
              }
            }
          }
          .m-c-center {
            height: 56%;
            border: 2px solid #274187;
          }
          .m-c-bottom {
            height: 26%;
            // border: 2px solid #274187;
            // border: 1px solid red;
            .wrap {
              // padding: 1rem;
              height: calc(100% - 4px);
              // height: 100%;
              display: flex;
              justify-content: space-between;
              .b-left {
                height: 100%;
                width: 49%;
                // border: 1px solid red;
                border: 2px solid #274187;
                .content1 {
                  height: calc(100% - 4rem);
                  // border: 1px solid red;
                  .sta-box {
                    height: 100%;
                    padding: 2rem;
                    display: flex;
                    // align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    box-sizing: border-box;

                    @keyframes fadenum {
                      100% {
                        transform: rotate(360deg);
                      }
                    }

                    .sta-li {
                      width: calc((100% - 2rem) / 2);
                      height: calc((100% - 2rem) / 2);
                      border-radius: 0.6rem;
                      background: #00183b;
                      border: 0.1rem solid rgba(45, 205, 255, 0.17);
                      display: flex;
                      justify-content: space-around;
                      align-items: center;
                      padding: 0 0rem;
                      &:nth-child(n + 3) {
                        margin-top: 2rem;
                      }
                      img {
                        width: 6rem;
                        height: 6rem;
                        animation: fadenum 2s infinite;
                      }
                      .sta-li-r {
                        // border: 1px solid red;
                        height: 4rem;
                        .text {
                          font-size: 0.8vw;
                          line-height: 1.7rem;
                          color: rgba(255, 255, 255, 0.64);
                          margin-bottom: 1rem;
                        }
                        .count {
                          text-align: right;
                          font-size: 1.1vw;
                          line-height: 2.2rem;
                          color: rgba(255, 255, 255, 0.87);
                          font-weight: bold;
                        }
                      }
                    }
                  }
                }
              }
              .b-right {
                height: 100%;
                width: 49%;
                // border: 1px solid red;
                border: 2px solid #274187;
                .content1 {
                  height: calc(100% - 4rem);
                  // border: 1px solid red;
                  .sta-box {
                    height: 100%;
                    padding: 2rem;
                    display: flex;
                    // align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    box-sizing: border-box;
                    @keyframes fadenum {
                      100% {
                        transform: rotate(360deg);
                      }
                    }
                    .sta-li {
                      width: calc((100% - 2rem) / 2);
                      height: calc((100% - 2rem) / 2);
                      border-radius: 0.6rem;
                      background: #00183b;
                      border: 0.1rem solid rgba(45, 205, 255, 0.17);
                      display: flex;
                      justify-content: space-around;
                      align-items: center;
                      padding: 0 0rem;
                      &:nth-child(n + 3) {
                        margin-top: 2rem;
                      }
                      img {
                        width: 6rem;
                        height: 6rem;
                        animation: fadenum 2s infinite;
                      }
                      .sta-li-r {
                        // border: 1px solid red;
                        height: 4rem;
                        .text {
                          font-size: 0.8vw;
                          line-height: 1.7rem;
                          color: rgba(255, 255, 255, 0.64);
                          margin-bottom: 1rem;
                        }
                        .count {
                          text-align: right;
                          font-size: 1.1vw;
                          line-height: 2.2rem;
                          color: rgba(255, 255, 255, 0.87);
                          font-weight: bold;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }

        .main-r {
          width: 25%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .m-r-top {
            height: 24%;
            border: 2px solid #274187;
            // border-radius: 6px;
            .content1 {
              height: calc(100% - 4rem);
              // border: 1px solid red;
            }
          }
          .m-r-center {
            height: 24%;
            border: 2px solid #274187;
            // border-radius: 6px;
            .content1 {
              height: calc(100% - 4rem);
              // border: 1px solid red;
            }
          }
          .m-r-bottom {
            height: 24%;
            border: 2px solid #274187;
            // border-radius: 6px;
            .content1 {
              height: calc(100% - 4rem);
              // border: 1px solid red;
            }
          }
        }
      }
    }
  }
  .h4s {
    height: 4.5rem;
    line-height: 4.5rem;
    background-image: url('@/assets/bigScreen/title-bg4.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.6rem 0.3rem 4.7rem;
    box-sizing: border-box;

    .tit-l {
      font-size: 0.9vw;
      font-weight: normal;
      line-height: 2.6rem;
      letter-spacing: 0;
      color: #ffffff;
      text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);

      span {
        font-size: 0.7vw;
        letter-spacing: 0;
        color: rgba(255, 255, 255, 0.62);
        margin-left: 1.8rem;
      }
    }
    .tit-r {
      display: flex;
      align-items: center;
    }
    .more {
      font-size: 0.6vw;
      font-weight: normal;
      line-height: 2.6rem;
      letter-spacing: 0rem;
      color: rgba(255, 255, 255, 0.8);
      text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);
      cursor: pointer;
    }
  }
  .h4s-ts {
    background-image: url('@/assets/bigScreen/title-bg31.png');
  }
  .h4s-ts2 {
    background-image: url('@/assets/bigScreen/title-bg32.png');
  }

  .title-item {
    height: 4rem;
    line-height: 3rem;
    font-size: 0.8vw;
    // padding: 0;
    // border: 1px solid red;
    background-image: url('@/assets/bigScreen1/title.png');
    background-repeat: no-repeat;
    background-size: 100% 90%;
    display: flex;
    justify-content: space-between;
    .btns {
      display: flex;
      .more {
        cursor: pointer;
        font-size: 0.9vw;
        width: 100px;
        height: 2.5rem;
        line-height: 2.5rem;
        display: flex;
        border: 2px solid rgb(16, 152, 243);
        border-radius: 5%;
        text-align: center;
        .zc {
          width: 50%;
          border: 1px solid rgb(16, 152, 243);
          &:hover {
            color: #20dbfd;
          }
        }
        .jc {
          width: 50%;
          border: 1px solid rgb(16, 152, 243);
          &:hover {
            color: #20dbfd;
          }
        }
      }
      .m-btns {
        cursor: pointer;
        height: 2.8rem;
        line-height: 2.8rem;
        margin-left: 1rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .active-item {
    color: #01e7f6;
  }
  .table-style {
    // border: 1px solid red;
    height: calc(100% - 3rem);
  }
  .chart-style {
    height: calc(100% - 1rem);
  }
  .isActive {
    color: #fff;
    background-color: #1098f3;
  }

  .ages-box {
    display: flex;
    justify-content: center;
    align-items: center;
    // padding: 0 1rem;
    // height: calc(100% - 7rem);
    height: 8rem;
    margin-top: 1rem;
    // border: 1px solid red;
    .ages-box-item {
      width: 33.3%;
      height: 100%;
      background: url('@/assets/bigScreen/achievement1.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      text-align: center;
      cursor: pointer;
      // max-height: 12rem;
      h6 {
        font-size: 3rem;
        font-weight: bold;
        color: #00e0fc;
      }
      img {
        width: 15rem;
        height: 10rem;
      }
    }
    .ages-box-item:nth-child(2) {
      background: url('@/assets/bigScreen/achievement2.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
    }
    .ages-box-item:nth-child(3) {
      background: url('@/assets/bigScreen/achievement3.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
    }
  }
  </style>
